import React, { MouseEventHandler, useState } from "react";
import { useHistory } from "react-router-dom";
// import style from "./index.scss";
import axios from "axios";

import styles from "./index.module.scss";

// const styles = require("./index.module.scss")

export interface ILoginProps {}
export interface ILoginState {
  username: String;
  password: String;
  isShowRegister: Boolean;
}
function LoginCard(props: { onChangeState: MouseEventHandler }) {
  // 绑定 父组件传过来的方法
  const { onChangeState } = props;
  // hook 设置 input 输入框事件与值获取
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  let history = useHistory();

  function handelLogin() {
    let params = {
      username: userName,
      password: password,
    };
    if (!params.username) {
      return alert("用户名不能为空");
    }
    if (!params.password) {
      return alert("密码不能为空");
    }
    history.push("/mainpage");
    axios.post(`http://192.168.123.146:8080/login`, params).then((res: any) => {
      console.log(res);
      // 路由跳转
      // history.push('/canvas1');
    });
  }
  return (
    <>
      {/* <div className="login-txt">登录</div> */}
      <div className={styles["login-txt"]}>登录</div>
      <form className={styles["form-area"]}>
        <div className={styles["form-item"]}>
          <label className={styles["form-item-label"]}>用户名</label>
          <input
            className={styles["form-item-input"]}
            placeholder="请输入用户名"
            onChange={(e) => setUserName(e.target.value)}
            type="text"
          />
        </div>
        <div className={styles["form-item"]}>
          <label className={styles["form-item-label"]}>密码</label>
          <input
            className={styles["form-item-input"]}
            placeholder="请输入密码"
            onChange={(e) => setPassword(e.target.value)}
            type="password"
          />
        </div>
      </form>
      <div className={styles["btn-operate"]}>
        {/* onClick={this.handleLogin} */}
        <button className={styles.btn} onClick={handelLogin}>
          登录
        </button>
        <button className={styles.btn} onClick={onChangeState}>
          注册
        </button>
        {/* onClick={this.handleregister} */}
      </div>
    </>
  );
}

function RegisterCard(props: { onCancelReg: MouseEventHandler }) {
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
  const [confirmPsd, setConfirmPassword] = useState("");

  // 密码一致校验
  function checkSamePassword() {
    if (password !== confirmPsd) {
      alert("确认密码与输入密码不一致，请检验");
      console.log("确认密码与输入密码不一致，请检验");
    }
  }
  // 注册提交
  function submitRegister() {
    let params = {
      userName: userName,
      password: password,
    };
    if (!params.userName) {
      return alert("用户名必填");
    }
    if (!params.password) {
      return alert("密码必填");
    }
    if (!confirmPsd) {
      return alert("密码必填");
    }
    console.log("注册提交--");
    return axios.post("", params).then((res: any) => {
      console.log("注册提交--");
    });
  }
  return (
    <>
      <div className={styles["login-txt"]}>注册</div>
      <form className={styles["form-area-register"]}>
        <div className={styles["form-item"]}>
          <label className={styles["form-item-label"]}>用户名</label>
          <input
            className={styles["form-item-input"]}
            placeholder="请输入用户名"
            onChange={(e) => setUserName(e.target.value)}
            type="text"
          />
        </div>
        <div className={styles["form-item"]}>
          <label className={styles["form-item-label"]}>密码</label>
          <input
            className={styles["form-item-input"]}
            placeholder="请输入密码"
            onChange={(e) => setPassword(e.target.value)}
            type="password"
          />
        </div>
        <div className={styles["form-item"]}>
          <label className={styles["form-item-label"]}>确认密码</label>
          <input
            className={styles["form-item-input"]}
            placeholder="请确认密码"
            onChange={(e) => setConfirmPassword(e.target.value)}
            onBlur={checkSamePassword}
            type="password"
          />
        </div>
      </form>
      <div className={styles["btn-operate"]}>
        <button className={styles.btn} onClick={props.onCancelReg}>
          取消
        </button>
        <button className={styles.btn} onClick={submitRegister}>
          注册
        </button>
      </div>
    </>
  );
}

export default function Login() {
  const [isShowRegister, setIsShowRegister] = useState(false);
  // let { id } = useParams();

  // 登录 窗口
  return (
    <div className={styles["wrap-login"]}>
      {/* <span>登录: {id}</span> */}
      <div className={styles.login}>
        {isShowRegister ? (
          <RegisterCard onCancelReg={() => setIsShowRegister(false)} />
        ) : (
          <LoginCard onChangeState={() => setIsShowRegister(true)} />
        )}
      </div>
    </div>
  );
}
